<template>
  <el-menu :default-openeds="['1', '3']">
    <el-submenu v-for="(item, index) in menuItems" :key="index" :index="'menu'+index">
      <template v-slot:title><i :class="item.icon"></i>{{item.title}}</template>
      <el-menu-item v-for="(subItem, subIndex) in item.children || []" :key="subIndex" :index="'menu'+index+'-'+subIndex">
          
          <i v-if="subItem.icon" :class="subItem.icon"></i>
          <span slot="title"><router-link :to="subItem.path">{{ subItem.title }}</router-link></span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      menuItems: [
        {
          title: "导航一",
          path: "",
          icon: "el-icon-message",
          children: [
            {
              title: "新闻",
              path: "/my_sample/news",
              icon: "",
            },
            {
              title: "用户",
              path: "/my_sample/user",
              icon: "",
            },
          ],
        },
        {
          title: "导航二",
          path: "",
          icon: "el-icon-menu",
        },
      ],
    };
  },
  methods: {

  },
};
</script>
